<template lang="pug">
.page
  .EmployeeCreate
    .bg-white.mb-20
      //- p.text-error {{serviceFeeType}}
      .roster.pall-20.relative(:class="isOnlyView ? 'isOnlyView-step' : ''")
        .steps-wrap(v-if="isOnlyView")
          .step-item(@click="pageJump('+', 0)") 员工基本信息
          .step-item(@click="pageJump('+', 1)") 附件上传
          .step-item(@click="pageJump('+', 2)") 员工合同信息
          .step-item(@click="pageJump('+', 3)") 员工参保信息
          .step-item(@click="pageJump('+', 4)" v-show="[1, 12, 13, 123].indexOf(+serviceFeeType) !== -1") 社会保险
          .step-item(@click="pageJump('+', 5)" v-show="[2, 12, 23, 123].indexOf(+serviceFeeType) !== -1") 公积金
          .step-item(@click="pageJump('+', 6)" v-show="[3, 13, 23, 123].indexOf(+serviceFeeType) !== -1") 商业保险
          .step-item(@click="pageJump('+', 7)" v-show="isOnlyView && manageTypeValue !== 1") 薪资
        Steps.employee-create-steps(:current="indexPage")
          Step(title="员工基本信息" icon="ios-copy")
          Step(title="附件上传" icon="ios-cloud-upload")
          Step(title="员工合同信息" icon="md-list")
          Step(title="员工参保信息" icon="md-people")
          Step(title="社会保险" icon="md-podium" v-show="[1, 12, 13, 123].indexOf(+serviceFeeType) !== -1")
          Step(title="公积金" icon="ios-albums" v-show="[2, 12, 23, 123].indexOf(+serviceFeeType) !== -1")
          Step(title="商业保险" icon="ios-archive" v-show="[3, 13, 23, 123].indexOf(+serviceFeeType) !== -1")
          Step(title="薪资" icon="logo-yen" v-show="isOnlyView && manageTypeValue !== 1")

    CreateStepsBasicInfo(
      v-if="indexPage === 0"
      @page="pageJump"
      @saveSuccess="basicInfoSaveSuccess"
      @querySuccess="basicInfoQuerySuccess"
      @basicInfoServerFee="basicInfoServerFee"
    )
    CreateStepsEnclosure(
      v-if="indexPage === 1"
      @page="pageJump"
    )
    CreateStepsContract(
      v-if="indexPage === 2"
      @page="pageJump"
    )
    CreateStepsJoinInsurance(
      v-if="indexPage === 3"
      @page="pageJump"
      @handleSelectServiceFeeType="handleSelectServiceFeeType"
      :serverFee="serverFee"
    )

    //- 以下保险根据参保信息版块所选择的参保种类进行判断显示
    CreateStepsShebao(
      v-if="indexPage === 4"
      @page="pageJump"
      @saveSuccess="shebaoSaveSuccess"
      :serviceFeeType = "serviceFeeType"
    )
    CreateStepsGongjijin(
      v-if="indexPage === 5"
      @page="pageJump"
      :serviceFeeType = "serviceFeeType"
    )
    CreateStepsShangbao(
      v-if="indexPage===6"
      @page="pageJump"
      :serviceFeeType = "serviceFeeType"
    )
    CreateStepsSalary(
      v-if="indexPage===7"
      @page="pageJump"
      :serviceFeeType = "serviceFeeType"
    )

    //- .pt-18
    //-   Button(type="info" @click="handleShowCreateDepartureInfoModal") 添加离职信息
    //- CreateDepartureInfoModal(ref="CreateDepartureInfoModal")
</template>

<script>
// import { EmployeesApi } from '@/api/Employees.api.js'
import CreateStepsBasicInfo from './modal/createStepsBasicInfo.vue' // 员工基本信息
import CreateStepsEnclosure from './modal/createStepsEnclosure.vue' // 附件上传
import CreateStepsContract from './modal/createStepsContract.vue' // 员工合同信息
import CreateStepsJoinInsurance from './modal/createStepsJoinInsurance.vue' // 员工参保信息
import CreateStepsShebao from './modal/createStepsShebao-dynamic.vue' // 社会保险
import CreateStepsGongjijin from './modal/createStepsGongjijin-dynamic.vue' // 公积金
import CreateStepsShangbao from './modal/createStepsShangbao.vue' // 商业保险
import CreateStepsSalary from './modal/createStepsSalary.vue' // 商业保险
// import CreateDepartureInfoModal from './modal/createDepartureInfoModal.vue' // 添加离职信息
// import { Common } from '@/utils/common.js'
export default {
  name: 'EmployeeCreate',

  components: {
    CreateStepsBasicInfo,
    CreateStepsEnclosure,
    CreateStepsContract,
    CreateStepsJoinInsurance,
    CreateStepsShebao,
    CreateStepsGongjijin,
    CreateStepsShangbao,
    CreateStepsSalary
    // CreateDepartureInfoModal
  },

  data () {
    return {
      companyId: '', // 公司ID
      companyName: '', // 公司名称
      employeeId: '', // 员工ID
      insuranceId: '', // 保险ID
      indexPage: 0,
      id: '',
      serviceFeeType: 123,
      isOnlyView: true,
      isModify: false,
      isToBeStaff: false,
      stepsClickArr: [
        { text: '员工基本信息', gotoPage: 0 },
        { text: '附件上传', gotoPage: 1 },
        { text: '员工合同信息', gotoPage: 2 },
        { text: '员工参保信息', gotoPage: 3 },
        { text: '社会保险', gotoPage: 4, isShow: '1,12,13,123' },
        { text: '公积金', gotoPage: 5, isShow: '2,12,23,123' },
        { text: '商业保险', gotoPage: 6, isShow: '3,13,23,123' }
      ],
      serverFee: null, // 参保信息里的服务费
      // manageTypeValue: null
      isFromRoster: null
    }
  },

  watch: {
  },

  computed: {
    manageTypeValue () {
      var currentCustomerManage = JSON.parse(localStorage.getItem('currentCustomerManage')) // 缓存里的公司部分信息
      return currentCustomerManage.typeValue
    }
  },

  created () {
    this.employeeId = this.$route.query.employeeId || ''
    this.companyId = this.$route.query.companyId
    this.companyName = this.$route.query.companyName
    this.isFromRoster = this.$route.query.isFromRoster
    this.isOnlyView = this.$route.query.isOnlyView != (undefined && false)
    this.isToBeStaff = this.$route.query.isToBeStaff
  },

  mounted () {
  },

  methods: {
    // 跳转页面
    pageJump (type, gotoPage) {
      console.log('type: ' + type + ', gotoPage: ' + gotoPage)
      if (type === '+') {
        if (gotoPage !== '' && gotoPage !== undefined) {
          this.indexPage = gotoPage
        } else {
          this.indexPage++
        }
      } else {
        // this.indexPage--
        if (gotoPage) {
          this.indexPage = gotoPage
        } else {
          this.indexPage--
        }
      }
    },

    // 员工基本信息保存成功
    basicInfoSaveSuccess (employeeId, isCreateNew) {
      this.employeeId = employeeId
      var tempQuery = {
        companyId: this.companyId,
        companyName: this.companyName,
        employeeId: this.employeeId,
        isFromRoster: this.isFromRoster,
        isToBeStaff: this.isToBeStaff,
        rank: Math.random()
      }
      if (isCreateNew) {
        tempQuery.isCreateNew = true
      }
      console.log(tempQuery,'tempQuery')
      this.$router.replace({
        path: '/EmployeeCreate',
        name: 'EmployeeCreate',
        query: tempQuery
      })
    },

    // 员工基本信息读取成功
    basicInfoQuerySuccess (serviceFeeType) {
      this.serviceFeeType = serviceFeeType
      // this.$router.replace({
      //   path: '/EmployeeCreate',
      //   name: 'EmployeeCreate',
      //   query: {
      //     companyId: this.companyId,
      //     companyName: this.companyName,
      //     employeeId: this.employeeId,
      //     serviceFeeType: this.serviceFeeType
      //   }
      // })
    },

    // 员工社保参数配置保存成功
    shebaoSaveSuccess (insuranceId) {
      this.insuranceId = insuranceId
    },

    handleSelectServiceFeeType (id) {
      this.serviceFeeType = id
    },

    // 修改
    // handleModify (pageIndex) {
    //   console.log('所点击的需要修改的pageIndex为：' + pageIndex)
    //   this.isOnlyView = false
    //   this.$router.replace({
    //     path: '/EmployeeCreate',
    //     name: 'EmployeeCreate',
    //     query: {
    //       companyId: this.companyId,
    //       companyName: this.companyName,
    //       employeeId: this.employeeId,
    //       isModify: true
    //     }
    //   })
    // },

    basicInfoServerFee (serverFee) {
      this.serverFee = serverFee
    }

    // // 添加离职信息 - 显示弹窗
    // handleShowCreateDepartureInfoModal () {
    //   this.$refs.CreateDepartureInfoModal.isShowCreateDepartureInfoModal = true
    // }
  }
}
</script>

<style lang="less" scope>
.EmployeeCreate{

}
.isOnlyView-step{
  .ivu-steps{
    .ivu-steps-item{
      &.ivu-steps-status-finish{
        .ivu-steps-head{
          .ivu-steps-head-inner{
            // &:before{
            //   content: "\F23A";
            // }
            // .ivu-steps-icon{
            //   display: none;
            // }
          }
        }
      }
      &.ivu-steps-status-process{
        .ivu-steps-head{
          .ivu-steps-head-inner{
            // &:before{
            //   content: "\F3A0";
            // }
          }
        }
      }
    }
  }
}
.steps-wrap{
  width: 100%;
  height: 102px;
  padding: 0 20px;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  text-indent: -9999px;
  margin-top: 20px;
  .step-item{
    // width: 12.5%;
    flex: 1;
    cursor: pointer;
  }
}
.employee-create-steps{
  .ivu-steps-item{
    // width: 12.5%;
    // flex: none;
  }
}
</style>
